<template>
    <div>
<table>
    <tbody>
        <tr>
            <td>房号</td>
            <td>
                <input type="text" name="" v-model="date.name"  id="">
            </td>
        </tr>
        <tr>
            <td>价格</td>
            <td>
                <input type="text" name="" v-model="date.price"  id="">
            </td>
        </tr>
        <tr>
            <td>是否要押金</td>
            <td>
                <input type="radio" name="a" v-model="date.isDeposit" id="" :value="true" >是
                <input type="radio" name="a" v-model="date.isDeposit" id="" :value="false">否
                <input type="text" v-if="date.isDeposit" name="" v-model="date.deposit"  id="">
                <input type="text" v-else readonly name="" v-model="date.deposit"  id="">元
            </td>
        </tr>
        <tr>
            <td>加床方式</td>
            <td>
                <input type="radio" name="b" v-model="date.extraBed" id="" :value="1" >收费加床
                <input type="radio" name="b" v-model="date.extraBed" id="" :value="2">免费加床
                <input type="radio" name="b" v-model="date.extraBed" id="" :value="3">不可加床
                <input type="text" v-if="date.extraBed==1" name="" v-model="date.extraBedPrice"  id="">
                <input type="text" v-else readonly name="" v-model="date.extraBedPrice"  id="">元
            </td>
        </tr>
        <tr>
            <td>图片</td>
            <td>
                <input type="file" name="" @change="upload" id="">
                <img :src="'https://localhost:7113/'+date.img" width="200px" height="100px">
            </td>
        </tr>
        <tr>
            <td>状态</td>
            <td>
                <input type="radio" name="c" v-model="date.state" id="" :value="true" >空闲
                <input type="radio" name="c" v-model="date.state" id="" :value="false">已预订
            </td>
        </tr>
        <tr>
            <td>房型</td>
            <td>
               <select v-model="date.tid">
                <option value="0">请选择</option>
                <option :value="a.tid" v-for="a in bands">{{ a.tname }}</option>
               </select>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="button" value="保存" @click="add">
            </td>
            
        </tr>
    </tbody>
</table>
    </div>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
const route=useRoute()
const router=useRouter()
onMounted(()=>{
band()
find()
})

const find=()=>{
 var vid=route.query.id

axios.get('https://localhost:7113/api/House/Find',{params:{id:vid}}).then(res=>{
  date.value=res.data

})
}
const band=()=>{


axios.get('https://localhost:7113/api/HouseType/Band').then(res=>{
  bands.value=res.data
})
}
const bands=ref([{
     "tid": 1,
    "tname": "大床房"
}])

const upload=(a:any)=>{
    debugger 
var b=a.target.files[0]
if(b.type!="image/jpeg"&&b.type!="image/png"){
alert('只能为jpg,png格式')
return
}
if(b.size>1*1024*1024){
    alert('不能大于2MB')
return
}

var fd=new FormData()
fd.append("file",b)

axios.post('https://localhost:7113/api/Upload',fd).then(res=>{
  date.value.img=res.data
})
}


const add=()=>{
axios.post('https://localhost:7113/api/House/Update',date.value).then(res=>{
if(res.data>0){
    alert('成功')
router.push({path:"/show"})
}else{
    alert('失败')
}

})

}
const date=ref({
    "id": 0,
  "name": "",
  "price": 0,
  "isDeposit": true,
  "deposit": 0,
  "extraBed": 1,
  "extraBedPrice": 0,
  "img": "",
  "state": true,
  "tid": 0,
  "isdel": true
})
</script>

<style scoped>

</style>